<!-- 健康事件 -->
<template>
	<border cardTitle="糖尿病">
		<Chart :optionData="option_column" style="height: 100%"></Chart>
	</border>
</template>
<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	import {
		bigScreenApi
	} from '@/api/index';
	import * as echarts from 'echarts';
	// Mock数据
	const mockData = {
		xdata: [...new Array(6)].map((item, i) => `${i + 1}月`),
		result: [{
				name: '测量次数',
				data: [...new Array(6)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0))
			},
			{
				name: '病人',
				data: [...new Array(6)].map((item, i) => +(Math.random(0, 0.1) * 1000).toFixed(0))
			}
		]
	};

	const color = [
		[{
				offset: 0,
				color: '#267A7B'
			},
			{
				offset: 0.5,
				color: '#267A7B'
			},
			{
				offset: 0.5,
				color: '#4EF6F6'
			},
			{
				offset: 1,
				color: '#4EF6F6'
			}
		],
		[{
				offset: 0,
				color: '#647984'
			},
			{
				offset: 0.5,
				color: '#647984'
			},
			{
				offset: 0.5,
				color: '#C6E5E6'
			},
			{
				offset: 1,
				color: '#C6E5E6'
			}
		]
	];
	const color2 = ['#4EF6F6', '#AFCED2'];

	// tooltip
	const tooltip = {
		trigger: 'axis',
		textStyle: {
			fontSize: '100%'
		}
	};

	const legend = {
		data: ['测量次数', '病人'],
		textStyle: {
			fontSize: 12,
			color: '#fff'
		},
		itemWidth: 24,
		itemHeight: 15,
		itemGap: 15,
		top: '2%',
		right: '2%',
		selectedMode: false
	};
	const grid = {
		top: '20%',
		left: '12%',
		right: '2%',
		bottom: '15%'
	};
	// xAxis
	const xAxis = {
		axisTick: {
			show: true
		},
		axisLine: {
			lineStyle: {
				color: 'rgba(255,255,255, .2)'
			}
		},
		axisLabel: {
			textStyle: {
				fontSize: 12,
				color: '#fff'
			}
		},
		data: ['11月', '12月', '1月', '2月', '3月', '4月'],

	};

	// yAxis
	const yAxis = [{
		type: 'value',
		min: 0,
		// max: 140,
		splitNumber: 4,
		splitLine: {
			show: true,
			lineStyle: {
				type: 'dashed',
				color: 'rgba(255,255,255,0.2)'
			}
		},
		axisLine: {
			show: false
		},
		axisLabel: {
			show: true,
			margin: 10,
			textStyle: {
				color: 'rgba(255,255,255,0.6)'
			}
		},
		axisTick: {
			show: false
		}
	}];
	const diamondData = mockData.result.reduce((pre, cur, index) => {
		// pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
		pre[index] = cur.data.map((el, id) => el);
		return pre;
	}, []);

	let series = mockData.result.reduce((p, c, i, array) => {
		console.log('i', ((i - 2) * 110) / 2);
		p.push({
			z: i + 1,
			type: 'bar',
			name: c.name,
			barWidth: 14,
			data: c.data,
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					x2: 1,
					y: 0,
					y2: 0,
					colorStops: color[i]
				}
			},
			label: {
				normal: {
					show: true,
					position: 'top',
					textStyle: {
						color: '#fff',
						fontSize: 12
					}
				}
			}
		}, {
			z: i + 10,
			type: 'pictorialBar',
			symbolPosition: 'end',
			symbol: 'diamond',
			symbolSize: [14, 10],
			symbolOffset: [i == 0 ? '-55%' : '55%', '-50%'],
			data: diamondData[i],
			itemStyle: {
				color: color2[i]
			},
			tooltip: {
				show: false
			}
		});

		return p;
	}, []);

	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				option_column: {
					tooltip,
					legend,
					xAxis,
					yAxis,
					series,
					grid
				}
			};
		},
		computed: {},
		props: {
			deptId: {
				type: [String, Number],
				default: '',
				option_column: {}
			}
		},
		watch: {
			deptId: {
				handler(newV, oldV) {
					this.$nextTick(() => {
						this.getInfo();
					});
				},
				immediate: true
			}
		},
		methods: {
			getInfo() {
				console.log(this.option_column);
				this.$postAction(bigScreenApi.treatmentDeathMonthCount + '?deptId=' + this.deptId).then(res => {
					if (res && res.code == 1) {
						let cowData = res.data;
						console.log(cowData);
						let illList = [];
						let dieList = [];
						let nameList = [];
						cowData.forEach(item => {
							illList.push(item.treatmentCount);
							dieList.push(item.deathCount);
							nameList.push(item.month + '月');
						});
						this.option_column.xAxis.data = nameList;
						this.option_column.series[0].data = illList;
						this.option_column.series[1].data = illList;

						this.option_column.series[2].data = dieList;

						this.option_column.series[3].data = dieList;
					}
				});
			}
		}
	};
</script>

<style scoped lang="less">
	/deep/ .listbox {
		margin: 0.2rem 0.23rem 0.2rem 0.63rem;
		height: calc(100% - 0.2rem);
		overflow: hidden;
		position: relative;

		.line {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 4.5em;
			width: 1px;
			background: #535b65;
		}
	}

	.list {
		height: 100%;
	}

	.list-item {
		color: #ffffff;

		.list-item+.list-item {
			margin-top: 0.15rem;
		}

		.name {
			width: 4em;
			margin-right: 0.5em;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.progress {
			width: 2.5rem;

			.progress_bg {
				background: linear-gradient(90deg, rgba(63, 149, 206, 0.3) 0%, #28f3f3 100%);
				height: 0.12rem;
			}
		}

		.num {
			margin-left: 0.32rem;
			width: 6em;

			.unit {
				color: #9cadd1;
			}
		}
	}
</style>